<template>
  <div class="content-box">
    <heading grade="1">
      {{title}}
      <router-link :to="{path: '/training/class/history', query: {classid: $route.query.id, curoseid: $route.query.crruid}}" tag="a" class="link_class">上课记录</router-link>
    </heading>
    <div class="class_show">
      <div class="grade_show">
        <el-row>
          <el-col :span="3">班 级：</el-col>
          <el-col :span="21">{{classData.trainClassName}}({{classData.classType}})</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">课 程：</el-col>
          <el-col :span="21">{{classData.trainCourseName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">校 区：</el-col>
          <el-col :span="21">{{classData.schoolName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">课 时：</el-col>
          <el-col :span="21">{{classData.lessonCount}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">上课时间：</el-col>
          <el-col :span="21">{{classData.beginTime | FormatDate('yyyy.MM.dd')}} - {{classData.endTime | FormatDate('yyyy.MM.dd')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">开课状态：</el-col>
          <el-col :span="21">
            <span v-if="classData.startStatus == 0">未开课</span>
            <span v-if="classData.startStatus == 1">上课中</span>
            <span v-if="classData.startStatus == 2">已上完</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">教 练：</el-col>
          <el-col :span="21">{{classData.coach ? classData.coach.join('、') : ''}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">上课周期：</el-col>
          <el-col :span="21">
            <el-row v-for="item in classData.classCycle" :key="item">
              <el-col :span="3">{{item.weekCode | getWeekDay}}</el-col>
              <el-col :span="10">{{item.begTime | FormatDate('HH:mm')}} - {{item.endgTime | FormatDate('HH:mm')}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- <el-row v-else>
          <el-col :span="3">上课周期：</el-col>
          <el-col :span="21">
            <el-row v-for="item in classData.classCycle" :key="item">
              <el-col :span="3">{{getWeekDay(item.weekCode)}}</el-col>
              <el-col :span="4">体能训练</el-col>
              <el-col :span="5">{{getHourFormat(item.begTime)}} - {{getHourFormat(item.endgTime)}}</el-col>
              <el-col :span="6">中心公园三号球场</el-col>
              <el-col :span="6">教练：李沐</el-col>
            </el-row>
          </el-col>
        </el-row> -->
      </div>
      <div class="table_title">
        <el-row>
          <el-col :span="12"><span class="tl">学员列表</span> {{train_class_student.total}}人</el-col>
          <el-col :span="12" style="text-align:right;">
            <!-- <el-button @click="handleAddStudent" class="orange-btn">新增学员</el-button> -->
            <el-button @click="handleImportStudent" v-if="classData.startStatus != 2">导入报名学员</el-button>
          </el-col>
        </el-row>
      </div>
      <!--tableList-->
      <div class="table_list">
        <el-table
          :data="train_class_student.list"
          stripe
          @sort-change="handelOrder"
          style="width: 834px">
          <el-table-column
            label="序号"
            align="center"
            :show-overflow-tooltip="true"
            type="index"
            width="60">
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            sortable
            :show-overflow-tooltip="true"
            width="138">
            <template scope="scope">
              <router-link :to="{path: '/training/student/detail/' + scope.row.studentId}" class="alink_color">{{ scope.row.name }}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            label="性别"
            width="88">
            <template scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-else-if="scope.row.sex == 2">女</span>
              <span v-else>保密</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            sortable
            align="center"
            :show-overflow-tooltip="true"
            width="88">
          </el-table-column>
          <el-table-column
            prop="nationality"
            label="国籍"
            align="center"
            :show-overflow-tooltip="true"
            width="128">
          </el-table-column>
          <el-table-column
            prop="coach"
            align="center"
            :show-overflow-tooltip="true"
            label="报名时间"
            width="160">
            <template scope="scope">{{scope.row.signupTime | FormatDate('yyyy.MM.dd')}}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            label="报名费"
            width="100">
            <template scope="scope">{{scope.row.signupFee | formatMoney}}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="70">
            <template scope="scope">
              <p><el-button @click="handleLeave(scope.row)" type="text" size="small">请假</el-button></p>
              <p><el-button @click="handleOffLeave(scope.row)" type="text" size="small" v-if="scope.row.leaveStatus == 2">撤销请假</el-button></p>
              <p><el-button @click="handleLesson(scope.row)" type="text" size="small" v-if="scope.row.makeUpstatus == 3">补课</el-button></p>
              <!--
              <p><el-button @click="handleDelete(scope.row.classStudentId,$event)" type="text" size="small">删除</el-button></p>
              -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(train_class_student)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      <!--components-->
      <leave-com v-if="isLeave" v-model="isLeave" :isOff="isOff" :student="student" @success="handleImportSuccess"></leave-com>
      <repair v-if="isAddLessons" v-model="isAddLessons" :makeup="makeup" :crruid="$route.query.crruid" @success="handleImportSuccess"></repair>
      <import-student v-if="isImport" v-model="isImport" :data="classData" @success="handleImportSuccess"></import-student>
      <add-student v-if="isAdd" v-model="isAdd"></add-student>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
import LeaveCom from './components/LeaveCom'
import Repair from './../student/components/Repair'
import ImportStudent from './components/ImportStudent'
import AddStudent from './components/AddStudent'
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  components: {
    LeaveCom,
    Repair,
    ImportStudent,
    AddStudent
  },
  created () {
    trainApi.trainClassInfoShow({
      id: this.$route.query.id
    }).then((res) => {
      this.classData = res.data
    })
  },
  computed: {
    ...mapGetters({
      train_class_student: 'train_class_student'
    })
  },
  data () {
    return {
      student: {}, // 学生数据
      title: '班级详情',
      query: this.getQuery({
        order: 1,
        sort: 1
      }),
      isOff: false, // 请假or撤销请假
      isLeave: false,
      isAddLessons: false,
      isImport: false,
      isAdd: false,
      classData: '',
      makeup: {},
      tableData: []
    }
  },
  methods: {
    fetch (query) {
      query.classId = this.$route.query.id
      this.$store.dispatch('train_class_student', query)
    },
    handleLeave (student) { // 请假
      this.isLeave = true
      this.isOff = false
      this.student = student
    },
    handleOffLeave (student) { // 撤销请假
      this.isLeave = true
      this.isOff = true
      this.student = student
    },
    handleLesson (row) { // 补课
      this.makeup = row
      this.isAddLessons = true
    },
    handleAddStudent () { // 新增学员
      this.isAdd = true
    },
    handleImportStudent () { // 导入学员
      this.isImport = true
    },
    handleDelete (id, event) { // 删除
      this.$confirm('确认删除该学员吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        trainApi.studentDelete({id: id}, {context: event.target, successMsg: '删除成功'})
      }).catch(() => {
        return false
      })
    },
    handelOrder (column) { // 排序
      console.log(column)
      let orderStr = column.order === 'descending' ? 2 : 1
      let sortStr = column.prop === 'age' ? 2 : 1
      this.query.sort = sortStr
      this.query.order = orderStr
      this.fetch(this.query)
    },
    handleImportSuccess () {
      this.fetch(this.query)
    }
  }
}
</script>
<style lang="scss">
a.link_class{
  font-size: 14px;
  font-weight:normal;
  color:#2a82ee;
  float:right;
}
.class_show{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .el-col{
    margin: 6px 0;
  }
  .grade_show{
    background: #f5f5f5;
    padding: 35px 35px 17px 35px;
    .el-col{
      margin:0 0 18px 0;
    }
    .alink_color{
      color:#2a82ee;
    }
  }
  .table_title{
    margin-top:35px;
    line-height: 36px;
    span.tl{
      font-size: 20px;
    }
  }
  .table_list{
    .cell{
      font-size:12px;
      padding:0 10px;
    }
    .el-button--text,.alink_color{
      color:#2a82ee;
    }
  }
}
</style>
